<template>
  <div>
    <div class="no-cation">
      <i class="el-icon-warning cation-icon"></i>
      <span class="no-cation-title">未认证</span>
      <span class="no-cation-memo">为了不影响你的活动报名，请尽快完成认证。</span>
      <el-button class="com-btn cation-btn" @click="toCation()">立即认证</el-button>
    </div>
    <div class="cation-memo">
      <div class="cation-memo-list">认证后你可以活动以下权益</div>
      <div class="cation-memo-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item,key) in cation_memo">
            <el-card class="cation-memo-item" shadow="never">
              <div class="cation-memo-icon" :style="'background-position:'+item.bg"></div>
              <div class="cation-memo-msg">
                <p>{{item.name}}</p>
                <p>{{item.msg1}}</p>
                <p>{{item.msg2}}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cation_memo: [
        {
          name: "提升公信力",
          msg1: "主办方实名认证",
          msg2: "活动更加真实可信",
          bg: "0 0"
        },
        {
          name: "加V标识",
          msg1: "标识突出醒目",
          msg2: "店铺更加权威可信",
          bg: "-104px 0px"
        },
        {
          name: "提现绿色通道",
          msg1: "可随时申请提现",
          msg2: "资金安全有保障",
          bg: "-209px -95px"
        }
      ]
    };
  },
  methods: {
    toCation() {
      this.$router.push({
        path: "/manage/setting/teamcation/process"
      });
      localStorage.setItem(
        "router_query",
        JSON.stringify({
          path: "/manage/setting/teamcation"
        })
      );
    }
  }
};
</script>

<style>
.no-cation {
  overflow: hidden;
  height: 60px;
  line-height: 40px;
  border-bottom: 1px solid #f1f1f1;
}
.cation-btn {
  float: right;
}
.cation-icon {
  font-size: 30px;
  line-height: 40px;
  float: left;
  color: #f56c6c;
}
.no-cation-title {
  font-size: 24px;
  margin: 0 10px;
  color: #f56c6c;
}
.no-cation-memo {
  color: #f56c6c;
}
.cation-memo-list {
  margin-top: 20px;
  font-size: 18px;
}
.cation-memo-item {
  width: 100%;
  height: 130px;
  overflow: hidden;
  margin-bottom: 20px;
}
.cation-memo-icon {
  float: left;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: url(https://ykp-new.oss-cn-hangzhou.aliyuncs.com/rzAllIcon0905.png)
    no-repeat;
  background-position: -209px 0px;
  text-align: center;
  line-height: 76px;
  color: #fff;
  font-size: 30px;
}
.cation-memo-msg {
  height: 76px;
  width: calc(100% - 96px);
  float: left;
  margin-left: 20px;
}
.cation-memo-msg > p {
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  color: #8995a5;
}
.cation-memo-msg > p:first-child {
  height: 24px;
  font-size: 18px;
  color: #233040;
}
.cation-memo-msg > p:nth-child(2) {
  margin-top: 10px;
}
.cation-memo-msg > p:last-child {
  margin-top: 5px;
}
.no-cation-img {
  display: block;
  width: 100%;
}
.no-cation-li {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  color: #65717f;
}
.cation-memo-msgs {
  font-weight: bold;
  margin-bottom: 10px;
}
.cation-memo-msgs-list {
  list-style: disc;
  padding-left: 20px;
  color: #65717f;
}
.cation-memo-msgs-list > li {
  line-height: 26px;
}
</style>